<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>就诊卡管理123</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#00DACA',
                        secondary: '#505050',
                        tertiary: '#999999',
                        light: '#F4F4F4',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        'rpx-15': '0.375rem',
                        'rpx-20': '0.5rem',
                        'rpx-24': '0.6rem',
                        'rpx-28': '0.7rem',
                        'rpx-30': '0.75rem',
                        'rpx-32': '0.8rem',
                        'rpx-36': '0.9rem',
                        'rpx-40': '1rem',
                        'rpx-42': '1.05rem',
                        'rpx-50': '1.25rem',
                        'rpx-60': '1.5rem',
                        'rpx-100': '2.5rem',
                        'rpx-180': '4.5rem',
                        'rpx-200': '5rem',
                        'rpx-460': '11.5rem',
                        'rpx-500': '12.5rem',
                        'rpx-680': '17rem'
                    },
                    fontSize: {
                        'rpx-28': '0.7rem',
                        'rpx-30': '0.75rem',
                        'rpx-32': '0.8rem',
                        'rpx-36': '0.9rem',
                        'rpx-42': '1.05rem'
                    },
                    borderRadius: {
                        'rpx-100': '2.5rem',
                        'rpx-24': '0.6rem'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .rpx-22px {
                font-size: 0.55rem;
            }
        }
    </style>
</head>
<body class="bg-light font-sans min-h-screen">
    <div class="overall w-full min-h-screen">
        <div class="title h-rpx-180 bg-primary text-white flex items-center">
            <div class="name flex items-center font-bold text-rpx-42 mt-rpx-50 ml-[3%]">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                <span>就诊卡管理</span>
            </div>
        </div>
        
        <div class="content w-full">
            <!-- 默认就诊人列表 -->
            <div class="manifest bg-white p-rpx-20 px-[5%] mt-rpx-15 flex items-center justify-between">
                <div>
                    <div class="flex justify-between items-center text-dark">
                        <span>张三 （本人）</span>
                        <span class="border border-gray-300 px-rpx-10 py-rpx-5 text-rpx-30">默认</span>
                    </div>
                    <div class="text-rpx-30 mb-rpx-15 text-secondary">身份证号：110101199001011234</div>
                    <div class="text-rpx-30 text-secondary">就诊卡号：1234567890</div>
                </div>
                <div>
                    <i class="fa fa-arrow-right text-rpx-22px" aria-hidden="true"></i>
                </div>
            </div>
            
            <!-- 暂无默认就诊人提示 -->
            <div class="empty-tip flex flex-col items-center justify-center p-rpx-40">
                <div class="empty-image w-rpx-200 h-rpx-200 mb-rpx-15">
                    <img src="/static/images/empty_default.png" alt="暂无默认就诊人图标" class="w-full h-full object-contain">
                </div>
                <div class="empty-text text-rpx-28 text-tertiary">暂无默认就诊人</div>
            </div>
            
            <!-- 就诊人列表 -->
            <div class="manifest bg-white p-rpx-20 px-[5%] mt-rpx-15 flex items-center justify-between">
                <div>
                    <div class="flex justify-between items-center text-dark">
                        <span>李四 （配偶）</span>
                        <span class="border border-gray-300 px-rpx-10 py-rpx-5 text-rpx-30">默认</span>
                    </div>
                    <div class="text-rpx-30 mb-rpx-15 text-secondary">身份证号：110101199202021234</div>
                    <div class="text-rpx-30 text-secondary">就诊卡号：0987654321</div>
                </div>
                <div>
                    <i class="fa fa-arrow-right text-rpx-22px" aria-hidden="true"></i>
                </div>
            </div>
            
            <!-- 暂无就诊人提示 -->
            <div class="empty-tip flex flex-col items-center justify-center p-rpx-40">
                <div class="empty-image w-rpx-200 h-rpx-200 mb-rpx-15">
                    <img src="/static/images/empty_patient.png" alt="暂无就诊人图标" class="w-full h-full object-contain">
                </div>
                <div class="empty-text text-rpx-28 text-tertiary">暂无就诊人</div>
            </div>
            
            <!-- 二维码弹窗 -->
            <div class="modal-mask fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
                <div class="modal-container bg-white rounded-rpx-24 w-[80%] max-w-rpx-680 overflow-hidden">
                    <div class="qrcode-content p-rpx-40">
                        <div class="qrcode-title text-center font-bold text-rpx-36 mb-rpx-30">就诊卡二维码</div>
                        <div class="qrcode-wrapper flex justify-center items-center p-rpx-20">
                            <!-- 二维码将在这里显示 -->
                            <div class="w-rpx-460 h-rpx-460 bg-gray-100 flex items-center justify-center">
                                <span class="text-tertiary">二维码内容</span>
                            </div>
                        </div>
                        <div class="qrcode-footer mt-rpx-30 flex justify-center">
                            <button class="close-btn bg-primary text-white px-rpx-60 py-rpx-16 rounded-rpx-100 text-rpx-32">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // JavaScript 部分已清空，需要重新实现交互逻辑
    </script>
</body>
</html>
    